<div class="row-fluid sortable ui-sortable">
	<div id="chart-stok" class="box span12">
		<div class="box-header well" data-original-title>
			<h2 id="action-title">Grafik Stok Sapi</h2>
			<div class="box-icon">
				<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
			</div>
		</div>
		<div class="box-content">
			
				<table class="table span5">
					<tr>
						<td>
							<label>Pilih Kota<label>
						</td>
						<td>
							<div class="controls">
							<select id="id-kota-stok" data-rel="chosen" name='kota' onchange="drawChartStock(document.getElementById('id-kota-stok').value);">
							<?php foreach($kota->result_array() as $row): ?>
									<option value='<?php echo $row["ID_KOTA"];?>'>
										<?php echo $row["NAMA_KOTA"]; ?>
									</option>
							<?php endforeach;?>
							</select>
							</div>
						</td>
					</tr>
				</table>
			<div id="ch-stok" style="height:300px" class="span11">
			</div>
		</div>
	</div>
</div>
<?php
	
	
?>


<script>
	//stack chart
	function drawChartStock(idKota){
		if($("#ch-stok").length)
		{
			var d1 = [];
			<?php
				$i=0;
				foreach($mapping_hasil as $tanggal => $data){
				$i+=1;
					echo " 	
							var myDate = '".$tanggal."';
							myDate = myDate.split('-');
							var newDate = myDate[1]+'/'+1+'/'+myDate[0];
							nd = new Date(newDate).getTime();
						";
						$sum = 0;
					foreach($data as $kota=>$jumlah){
						$sum += $jumlah;
						
						echo "
								if(".$kota."==idKota){
									d1.push([nd,".$sum."]);
								}
							";
						
						//echo "console.log(".$tanggal.");";
					}
					//echo "d1.push([nd,".$sum."]);";
					
				}
			?>
			var plot = $.plot($("#ch-stok"),
					[ { data: d1, label: "jumlah"} ], {
					   series: {
						   lines: { show: true  },
						   points: { show: true }
					   },
					   grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
					   //yaxis: { min: 0, max: <?php echo $max_pp["J"]; ?>+1 },
					   xaxis:  {
									mode: "time", 
									timeformat: "%b/%y", 
									minTickSize: [1, "month"],
									monthNames: ["jan", "feb", "mar", "apr", "mar", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
								},
					   colors: ["#539F2E", "#3C67A5"]
					 });
			
			function showTooltip(x, y, contents) {
				$('<div id="tooltip">' + contents + '</div>').css( {
					position: 'absolute',
					display: 'none',
					top: y + 5,
					left: x + 5,
					border: '1px solid #fdd',
					padding: '2px',
					'background-color': '#dfeffc',
					opacity: 0.80
				}).appendTo("body").fadeIn(200);
			}

			var previousPoint = null;
			$("#ch-stok").bind("plothover", function (event, pos, item) {
				$("#x").text(pos.x.toFixed(2));
				$("#y").text(pos.y.toFixed(2));

					if (item) {
						if (previousPoint != item.dataIndex) {
							previousPoint = item.dataIndex;

							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
								y = item.datapoint[1].toFixed(2),
								date = new Date(x/1000*1000),
								day = date.getDate(),
								month = date.getMonth()+1,
								year = date.getFullYear();
								//item.series.label
							showTooltip(item.pageX, item.pageY,
										"&nbsp;&nbsp;&nbsp;"+month+"/"+year+" = "+y);
						}
					}
					else {
						$("#tooltip").remove();
						previousPoint = null;
					}
			});

			
			

			/*$(".stackControls input").click(function (e) {
				e.preventDefault();
				stack = $(this).val() == "With stacking" ? true : null;
				plotWithOptions();
			});
			$(".graphControls input").click(function (e) {
				e.preventDefault();
				bars = $(this).val().indexOf("Bars") != -1;
				lines = $(this).val().indexOf("Lines") != -1;
				steps = $(this).val().indexOf("steps") != -1;
				plotWithOptions();
			});*/
		}
	}
	
</script>
<?php	/*
	echo "<br>===========hasil hitung=============<br>";
	foreach($hasil_hitung as $key=>$data){	//>> 43
		echo $key." : ".$data."<br>";
	}
	
	echo "<br>============akumulasi============<br>";
	foreach($hasil_fix as $key=>$data){	//>> 43
		echo $key." : ".$data."<br>";
	}
	
	echo "<br>============kota============<br>";
	foreach($kota as $key=>$data){
		echo $key."<br>";
	}*/
?>